{% extends 'car_system/base.html' %}

{% block title %}{{ car.series_name }} - 汽车数据分析系统{% endblock %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="{% url 'home' %}">首页</a></li>
        <li class="breadcrumb-item"><a href="{% url 'car_list' %}">汽车数据</a></li>
        <li class="breadcrumb-item active" aria-current="page">{{ car.series_name }}</li>
    </ol>
</nav>

<div class="row">
    <!-- 车型详情 -->
    <div class="col-md-8">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-car me-2"></i>{{ car.series_name }} 详细信息</h5>
            </div>
            <div class="card-body">
                <div class="row mb-4">
                    <div class="col-md-6">
                        {% if car.image %}
                        <img src="{{ car.image }}" alt="{{ car.series_name }}" class="img-fluid rounded">
                        {% else %}
                        <div class="bg-secondary text-white rounded d-flex align-items-center justify-content-center" style="height: 300px;">
                            <h3>无图片</h3>
                        </div>
                        {% endif %}
                    </div>
                    <div class="col-md-6">
                        <h4 class="text-primary mb-3">{{ car.series_name }}</h4>
                        <p class="text-muted">
                            <i class="fas fa-trademark me-2"></i>品牌: <strong>{{ car.brand_name }}</strong>
                            {% if car.sub_brand_name %}
                            ({{ car.sub_brand_name }})
                            {% endif %}
                        </p>
                        <p><i class="fas fa-money-bill-wave me-2"></i>官方指导价: <strong>{{ car.price }}</strong></p>
                        {% if car.dealer_price %}
                        <p><i class="fas fa-tag me-2"></i>经销商参考价: <strong>{{ car.dealer_price }}</strong></p>
                        {% endif %}
                        <div class="d-flex mb-3">
                            <div class="me-4">
                                <h5 class="text-center">{{ car.ranks }}</h5>
                                <p class="text-muted text-center mb-0">当前排名</p>
                            </div>
                            <div class="me-4">
                                <h5 class="text-center">{{ car.count }}</h5>
                                <p class="text-muted text-center mb-0">月销量</p>
                            </div>
                            <div>
                                <h5 class="text-center">{{ car.car_review_count }}</h5>
                                <p class="text-muted text-center mb-0">点评数</p>
                            </div>
                        </div>
                        
                        {% if car.last_rank %}
                        <div class="alert {% if car.ranks < car.last_rank %}alert-success{% elif car.ranks == car.last_rank %}alert-warning{% else %}alert-danger{% endif %} mt-3">
                            <i class="fas {% if car.ranks < car.last_rank %}fa-arrow-up{% elif car.ranks == car.last_rank %}fa-arrows-alt-h{% else %}fa-arrow-down{% endif %} me-2"></i>
                            相比上月排名 
                            {% if car.ranks < car.last_rank %}
                            <strong>上升</strong> {{ car.last_rank|add:"-"|add:car.ranks }} 位
                            {% elif car.ranks == car.last_rank %}
                            <strong>持平</strong>
                            {% else %}
                            <strong>下降</strong> {{ car.ranks|add:"-"|add:car.last_rank }} 位
                            {% endif %}
                        </div>
                        {% endif %}
                        
                        {% if car.descender_price and car.descender_price > 0 %}
                        <div class="alert alert-info mt-3">
                            <i class="fas fa-tags me-2"></i>
                            近期降价 <strong>{{ car.descender_price }} 万元</strong>
                        </div>
                        {% endif %}
                    </div>
                </div>
                
                <hr>
                
                <!-- 车型所有详细信息 -->
                <h5 class="mb-3">所有参数信息</h5>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <tbody>
                            <tr>
                                <th scope="row" style="width: 30%;">车系ID</th>
                                <td>{{ car.series_id }}</td>
                            </tr>
                            <tr>
                                <th scope="row">车系名称</th>
                                <td>{{ car.series_name }}</td>
                            </tr>
                            <tr>
                                <th scope="row">当前排名</th>
                                <td>{{ car.ranks }}</td>
                            </tr>
                            <tr>
                                <th scope="row">上月排名</th>
                                <td>{{ car.last_rank }}</td>
                            </tr>
                            <tr>
                                <th scope="row">最低指导价（万元）</th>
                                <td>{{ car.min_price }}</td>
                            </tr>
                            <tr>
                                <th scope="row">最高指导价（万元）</th>
                                <td>{{ car.max_price }}</td>
                            </tr>
                            <tr>
                                <th scope="row">月销量（台）</th>
                                <td>{{ car.count }}</td>
                            </tr>
                            <tr>
                                <th scope="row">用户点评数</th>
                                <td>{{ car.car_review_count }}</td>
                            </tr>
                            <tr>
                                <th scope="row">综合评分</th>
                                <td>{{ car.score }}</td>
                            </tr>
                            <tr>
                                <th scope="row">降价幅度（万元）</th>
                                <td>{{ car.descender_price }}</td>
                            </tr>
                            <tr>
                                <th scope="row">品牌ID</th>
                                <td>{{ car.brand_id }}</td>
                            </tr>
                            <tr>
                                <th scope="row">品牌名称</th>
                                <td>{{ car.brand_name }}</td>
                            </tr>
                            <tr>
                                <th scope="row">子品牌ID</th>
                                <td>{{ car.sub_brand_id }}</td>
                            </tr>
                            <tr>
                                <th scope="row">子品牌名称</th>
                                <td>{{ car.sub_brand_name }}</td>
                            </tr>
                            <tr>
                                <th scope="row">车系图片数量</th>
                                <td>{{ car.series_pic_count }}</td>
                            </tr>
                            <tr>
                                <th scope="row">经销商价格</th>
                                <td>{{ car.dealer_price }}</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <a href="{% url 'car_list' %}" class="btn btn-outline-primary">
                        <i class="fas fa-arrow-left me-1"></i> 返回列表
                    </a>
                    {% if user.is_superuser %}
                    <div>
                        <a href="{% url 'edit_car' car.series_id %}" class="btn btn-warning me-2">
                            <i class="fas fa-edit me-1"></i> 编辑信息
                        </a>
                        <a href="{% url 'delete_car' car.series_id %}" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i> 删除
                        </a>
                    </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
    
    <!-- 侧边栏 -->
    <div class="col-md-4">
        <!-- 相似车型推荐 -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-car-alt me-2"></i>同品牌其他车型</h5>
            </div>
            <div class="card-body">
                <div class="list-group">
                    {% for similar in similar_cars %}
                    <a href="{% url 'car_detail' similar.series_id %}" class="list-group-item list-group-item-action d-flex align-items-center">
                        {% if similar.image %}
                        <img src="{{ similar.image }}" alt="{{ similar.series_name }}" style="width: 60px; height: 45px; object-fit: cover;" class="rounded me-3">
                        {% else %}
                        <div class="bg-secondary text-white rounded d-flex align-items-center justify-content-center me-3" style="width: 60px; height: 45px;">无图</div>
                        {% endif %}
                        <div>
                            <h6 class="mb-1">{{ similar.series_name }}</h6>
                            <small class="text-muted">{{ similar.price }}</small>
                        </div>
                    </a>
                    {% empty %}
                    <div class="list-group-item">
                        <p class="mb-0 text-center">没有找到同品牌的其他车型</p>
                    </div>
                    {% endfor %}
                </div>
            </div>
        </div>
        
        <!-- 统计信息卡片 -->
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>市场表现</h5>
            </div>
            <div class="card-body">
                <div class="d-flex justify-content-between mb-3">
                    <div class="text-center">
                        <h3>{{ car.ranks }}</h3>
                        <p class="text-muted mb-0">当前排名</p>
                    </div>
                    <div class="text-center">
                        <h3>{{ car.count }}</h3>
                        <p class="text-muted mb-0">月销量</p>
                    </div>
                </div>
                
                {% if car.last_rank %}
                <div class="progress mb-3" style="height: 25px;">
                    {% if car.ranks < car.last_rank %}
                    <div class="progress-bar bg-success" role="progressbar" style="width: 100%;">
                        上升 {{ car.last_rank|add:"-"|add:car.ranks }} 位
                    </div>
                    {% elif car.ranks == car.last_rank %}
                    <div class="progress-bar bg-warning" role="progressbar" style="width: 100%;">
                        排名不变
                    </div>
                    {% else %}
                    <div class="progress-bar bg-danger" role="progressbar" style="width: 100%;">
                        下降 {{ car.ranks|add:"-"|add:car.last_rank }} 位
                    </div>
                    {% endif %}
                </div>
                {% endif %}
                
                <div class="alert alert-info">
                    <p class="mb-0">
                        <i class="fas fa-info-circle me-2"></i>
                        该车型在所有{{ car.brand_name }}品牌中排名靠前，市场表现良好。
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %} 